<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<div>
    <span>
        <input type="text" v-model="fname">
        <button @click="add">添加</button>
        <button @click="change">添加</button>
    </span>
</div>
    <ul>
        <li :key="index" v-for="(item,index) in list">
            {{item}}<button @click="del(index)">删除</button>
        </li>
    </ul>
    {{info.name}}
    {{info.age}}
    {{info.gender}}
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            fname:'',
            list:['apple','orange','bannan'],
            info:{
                name:'lisi',
                age:12,
            }
        },
        methods:{
            add(){
                this.list.push(this.fname)
            },
            del(index){
                this.list.splice(index,1)
            },
            change(){
                this.list=this.list.slice(0,2)
            }
        }
    })
    vm.list[0]='lemon'
    Vue.set(vm.list,1,'haha2')
    vm.$set(vm.list,2,'asd2')


    vm.$set(vm.info,'gender','female')
    vm.info.gender='male'
</script>
</body>
</html>